<template>
  <div>
    <CreateCourseHead v-if="windows === 1"></CreateCourseHead >
    <el-header class="classheader" v-if="windows === 0">
    <span >新建课程</span>
</el-header>
    <van-form @submit="onSubmit(coursename, description, pfbzmsg, pfbzs, pfbz, pfbzfz)">
  <van-field
    v-model="coursename"
    name="课程名"
    label="课程名"
    placeholder="请填写课程名"
    :rules="[{ required: true, }]"
  />
  <van-field
    v-model="description"
    type="description"
    name="课程描述"
    label="课程描述"
    placeholder="请填写课程描述"
    :rules="[{ required: true,  }]"
  />
  <van-field
    v-model="pfbzmsg"
    rows="1"
    autosize
    type="textarea"
    name="评分标准描述"
    label="评分标准描述"
    placeholder="请填写评分标准描述"
    :rules="[{ required: true,  }]"
  />
<van-field name="radio" label="学生是否评分">
  <template #input>
    <van-radio-group v-model=isStuPermit direction="horizontal">
      <van-radio name="1">是</van-radio>
      <van-radio name="2">否</van-radio>
    </van-radio-group>
  </template>
</van-field>
<div v-show="isStuPermit==1"> 
  <van-field
    v-model=teascale
    type="text"
    name="教师评分占比"
    label="教师评分占比"
    placeholder="请填写教师评分占比"
    :rules="[{ required: true,  }]"
  />
  <van-field
    v-model=stuscale
    type="text"
    name="学生评分占比"
    label="学生评分占比"
    placeholder="请填写学生评分占比"
    :rules="[{ required: true,  }]"
  />
</div>

  <van-cell title="课程评分项"> 
  <template >
    <van-stepper v-model="pfbzs" min="1" max="5" />
  </template>
  </van-cell>
  <div v-for="i in pfbzs" :key="i" style="margin: 16px;" >
  <van-field
    v-model=pfbz[i]
    type="text"
    name="标准名"
    label="标准名"
    placeholder="请填写标准名"
    :rules="[{ required: true,  }]"
  />
  <van-field
    v-model=pfbzfz[i]
    type="text"
    name="标准分值"
    label="标准分值"
    placeholder="请填写标准1分值"
    :rules="[{ required: true,  }]"
  />
</div>
  <div style="margin: 16px;" >
    <van-button round block type="info" native-type="submit" >创建课程</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import axios from 'axios';
import CreateCourseHead from './comps/CreateCourseHead.vue';
export default {
    name: 'CreateCourse',
    data() {
    return {
      windows: 0,
      coursename: '',
      description: '',
      pfbzmsg: '',
      pfbzs:1,
      pfbz: [null, null, null, null, null, null],
      pfbz1: null,
      pfbz2: null,
      pfbz3: null,
      pfbz4: null,
      pfbz5: null,
      pfbzfz: [0, 0, 0, 0, 0, 0],
      pfbzfz1: 0,
      pfbzfz2: 0,
      pfbzfz3: 0,
      pfbzfz4: 0,
      pfbzfz5: 0,
      isStuPermit:2,
      teascale:1,
      stuscale:0,
      createuser:1,

    };
  },
  mounted() {
    if (window.innerWidth < 768) {
        this.windows = 1;
      } else {
        this.windows = 0;
      }
  },
    methods: {
    onSubmit(coursename, description, pfbzmsg, pfbzs, pfbz, pfbzfz) {
      if (parseInt(pfbzfz[1])+parseInt(pfbzfz[2])+parseInt(pfbzfz[3])+parseInt(pfbzfz[4])+parseInt(pfbzfz[5])!= 100) {
        console.log(parseInt(pfbzfz[1])+parseInt(pfbzfz[2])+parseInt(pfbzfz[3])+parseInt(pfbzfz[4])+parseInt(pfbzfz[5]));
        this.$message.error('评分标准总分必须为100分');
        return false;
      }
      if (parseFloat(this.teascale)+parseFloat(this.stuscale) != 1) {
        console.log(parseFloat(this.teascale)+parseFloat(this.stuscale));
        this.$message.error('教师评分占比和学生评分占比总和必须为1');
        return false;
      }
      // console.log(pfbzfz[5]);
      axios.get('/course/create?coursename='+coursename+
      '&createuser='+this.createuser+
      '&description='+description+
      '&pfbzmsg='+pfbzmsg+
      '&pfbzs='+pfbzs+
      '&pfbz1='+pfbz[1]+
      '&pfbz2='+pfbz[2]+
      '&pfbz3='+pfbz[3]+
      '&pfbz4='+pfbz[4]+
      '&pfbz5='+pfbz[5]+
      '&pfbzfz1='+pfbzfz[1]+
      '&pfbzfz2='+pfbzfz[2]+
      '&pfbzfz3='+pfbzfz[3]+
      '&pfbzfz4='+pfbzfz[4]+
      '&pfbzfz5='+pfbzfz[5]+
      '&isStuPermit='+this.isStuPermit+
      '&teascale='+this.teascale+
      '&stuscale='+this.stuscale
       ).then(response => {
          console.log(response);
          if(response.data.code === 200){
            this.$message.success('课程创建成功');
            this.CreateCourse();
          }
        }).catch(error => {
          console.log(error);
        });
    },
    CreateCourse() {  
      this.$router.push('/Index');  
    },
  },
  components: {
    CreateCourseHead,
  },
}
</script>

<style scoped> 
.classheader {
background-color: #424242;
}
.classheader span {
/* height: 60px;
width: 300px;
background-color: #f42525; */
color: #fff;
font-size: 20px;
text-align: center;
line-height: 60px;
}
</style>